<template>
    <view class="container">
        <view class="custom-top">
            <uni-search-bar
                class="uni-mt-10"
                radius="100"
                placeholder="搜索训练项目"
                clearButton="none"
                cancelButton="none"
                v-model="params.keyword"
                @confirm="getVideoList(false)"
            />
        </view>
        <view class="p20">
            <view class="f f-bt f-wrap">
                <view
                    v-for="(video, index) in videos"
                    :key="index"
                    class="f-col mt-20 video-item"
                    @click="videoJump(video.video_id)"
                >
                    <view class="mb-10 video-thumb">
                        <image :src="video.video_thumb" mode="aspectFill" />
                    </view>
                    <view class="text-sm mb-1">{{ video.video_title }}</view>
                    <view class="text-xs px-2 py-1 bg-emerald-50 text-emerald-500 rounded-full">{{
                        video.level_title
                    }}</view>
                </view>
            </view>
        </view>

        <!-- 加载状态提示 -->
        <view class="loading-more" v-if="isLoading">
            <text>加载中...</text>
        </view>
        <view class="no-more" v-if="!hasMore && videos.length > 0">
            <text>没有更多数据了</text>
        </view>
        <view class="empty-tip" v-if="!isLoading && videos.length === 0">
            <text>暂无视频数据</text>
        </view>
    </view>
</template>

<script>
import { getVideoList } from '@/api/modules/common.js';
export default {
    data() {
        return {
            videos: [],
            params: {
                keyword: '',
                page_no: 1,
                page_size: 20
            },
            isLoading: false,
            hasMore: true,
            total: 0
        };
    },
    methods: {
        async getVideoList(loadMore = false) {
            if (!loadMore) {
                // 非加载更多时，重置页码
                this.params.page_no = 1;
                this.videos = [];
                this.hasMore = true;
            }

            if (!this.hasMore || this.isLoading) return;

            this.isLoading = true;

            try {
                // 调用API获取视频列表
                const { data } = await getVideoList(this.params);
                const { total, list } = data;

                // 更新总数
                this.total = total;

                // 追加数据
                this.videos = [...this.videos, ...list];

                // 判断是否还有更多数据
                this.hasMore = this.videos.length < total;

                // 页码加1，为下次加载做准备
                if (this.hasMore) {
                    this.params.page_no++;
                }
            } catch (error) {
                console.error('获取视频列表失败:', error);
                uni.showToast({
                    title: '获取视频列表失败',
                    icon: 'none'
                });
            } finally {
                this.isLoading = false;
                uni.stopPullDownRefresh();
            }
        },
        videoJump(video_id) {
            uni.navigateTo({ url: `/pages/video/video-play?video_id=${video_id}` });
        }
    },
    onLoad() {
        this.getVideoList();
    },
    // 上拉触底事件
    onReachBottom() {
        if (this.hasMore && !this.isLoading) {
            this.getVideoList(true);
        }
    },
    // 下拉刷新事件
    onPullDownRefresh() {
        this.getVideoList();
    }
};
</script>

<style lang="scss">
.container {
    padding: 40rpx 20rpx;
    font-size: 14px;
    line-height: 24px;
    padding-top: 0;
}

.video-item {
    width: 48%;

    .video-thumb {
        border-radius: 15rpx;

        image {
            width: 100%;
            height: 200rpx;
            border-radius: 15rpx;
        }
    }
}

.loading-more,
.no-more,
.empty-tip {
    text-align: center;
    padding: 20rpx 0;
    color: #999;
    font-size: 28rpx;
}
</style>
